import React, { Component } from 'react';
import { Input } from 'antd';

class SingleTextBox extends Component {
    constructor(props){
        super(props);

        this.state={
            value: ''
        }
    }

    handleChange=(e)=>{
        this.setState({
            value: e.target.value
        });
    }

    render() {
        if (this.props.isSubmit) {
            this.props.handleData(this.props.id, this.state.value)
        }
        
        var temp;

        if (this.props.isRequired) {
            temp = <span style={{
                color: '#f00'
            }}>
                *
            </span>
        }

        return (
            <div style={{
                fontSize: 30,
                paddingLeft: 50,
                paddingBottom: 50
            }}>
                <div style={{
                    paddingTop: 20,
                    paddingBottom: 20
                }}>
                    <span style={{
                        fontWeight: 'bold'
                    }}>{`${this.props.index + 1}. `}</span>
                    <span>{this.props.title}</span>
                    {temp}
                </div>
                <Input placeholder='写点什么吧' style={{
                    width: 900
                }} onChange={(e)=>this.handleChange(e)}/>
            </div>
        )
    }
}

export default SingleTextBox;